<template>

  <div style="width: 100%">
    <div >
      <h3>工作台</h3>

    <el-row :gutter="20" style="width: 100%;">
      <el-col
          style="width: 600px;"
          v-for="(card, key) in toolCards"
          :key="key"
          :span="4"
          :xs="8"
          class="quick-entrance-items"
          @click="toTarget(card.name)"
      >


        <div class="quick-entrance-item"  style="width: 100%">
          <div
              style="width: 100%;background-color:#faecd8;"
              class="quick-entrance-item-icon"
              :style="{ backgroundColor: card.bg}"
          >

            <div><span style="color: #F0F2F5;font-size:25px">
                  <b>{{ card.value }}</b>
                </span></div>

          </div>
          <p>{{ card.label }}</p>
        </div>

      </el-col>
    </el-row>
  </div>

<!--1-->
    <div style="width: 100%;height: 580px;">
<h3>人员统计</h3>
      <div  style="width: 25%;float: left;margin-right: 10px;height: 555px;background-color: #fff">
        <p > <b>总人数 {{peopleSum1}}  &nbsp; 园区人数  {{peopleSum}}  &nbsp;  &nbsp;  &nbsp;  &nbsp;  访客人数 {{visterSum}}</b></p>
        <el-pagination style="width: 600px"
                       :current-page="OutinPage"
                       :page-size="OutinSize"
                       :total=  peopleSum
                       layout="prev, pager, next"
                       @current-change="handleCurrentChange"
                       @size-change="handleSizeChange"
        />

      <el-table
          :data="peoples"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          style="width: 100%; height:555px;background-color: #fff"
      >
        <el-table-column
            label="头像"
            min-width="60"
            min-height="20"
            max-height="150"
            prop="userImg"
        >
          <template #default="scope">
            <CustomPic
                style="margin-top:8px"
                :pic-src="scope.row.userImg"
            />
          </template>
        </el-table-column>

        <el-table-column
            sort-by="created_at"
            align="left"
            label="时间"
            min-width="70"
            prop="time"
        />
        <el-table-column
            align="left"
            label="闸机口"
            min-width="70"
            prop="gate"
        />
        <el-table-column
            align="left"
            label="进场入场"
            min-width="70"
            prop="outinstatus"
        />

      </el-table>
      </div>

<!--园区人数 考勤-->
      <div  style="width: 20%;float: left;height: 630px;background-color: #fff">
        <p > <b>&nbsp; 园区人数  {{peopleSum}}</b></p>

        <el-pagination style="width: 300px"
                       :current-page="StaffStatusPage"
                       :page-size="StaffStatusSize"
                       :total=peopleSum
                       layout="prev, pager, next"
                       @current-change="staffCurrentChange"
                       @size-change="staffSizeChange"
        />

        <el-table
            :data="examStatusSum"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            style="width: 100%; height:auto;"
        >
          <el-table-column
              label="部门"
              min-width="60"
              min-height="20"
              prop="department"
          />
          <el-table-column
              align="left"
              label="人数"
              min-width="70"
              prop="num"
          />
          <el-table-column
              align="left"
              label="违规人数"
              min-width="70"
              prop="examStatus"
          />

        </el-table>
      </div>


      <div style="float: left;margin: 0 10px;height: 545px;width: 220px;">

        <table width="100%" style="background-color: #fff;height: 630px;text-align: center" >
          <tr>
            <th colspan="2">智能违规检测</th>
          </tr>

          <tr style="line-height: 100px;font-size: 20px">
            <td>烟雾识别</td>
            <td>{{ fireinfos["SmokeRecognition"] }}</td>
          </tr>

          <tr style="line-height: 100px;font-size: 20px">
            <td>火焰识别</td>
            <td>{{ fireinfos["FlameRecognition"] }}</td>
          </tr>

          <tr style="line-height: 100px;font-size: 20px">
            <td>积水识别</td>
            <td>{{ fireinfos1["BadgeRecognition"] }}</td>
          </tr>
          <tr style="line-height: 100px;font-size: 20px">
            <td>人员纠纷</td>
            <td>{{ fireinfos1["WhiteCoatRecognition"] }}</td>
          </tr>
          <tr style="line-height: 100px;font-size: 20px">
            <td>人体行为识别</td>
            <td>{{ fireinfos1["NurseCapRecognition"] }}</td>
          </tr>

        </table>

      </div>

      <div style="float: left;margin: 0 10px;height: 553px;width: 10%;">


     <table width="100%" style="background-color: #fff;height: 630px;text-align: center" >
<tr>
  <th colspan="2">智能违规检测</th>
</tr>

       <tr style="line-height: 100px;font-size: 20px">
         <td>胸牌未佩戴</td>
         <td>{{ fireinfos["SmokeRecognition"] }}</td>
       </tr>

       <tr style="line-height: 100px;font-size: 20px">
         <td>领带违规</td>
         <td>11</td>
       </tr>

       <tr style="line-height: 100px;font-size: 20px">
         <td>工作证未戴</td>
         <td>11</td>
       </tr>

     </table>

      </div>

      <div style="background-color: #fff;float: right; width: 28%; height: 630px">

        <CenterCard title="预警统计" style="height: 280px;">
          <template #action>
            <span class="gvaIcon-prompt" style="color: #999" />
          </template>
          <template #body style="float: left">
            <part />
          </template>


        </CenterCard>



        <el-table
            :data="secure"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            style="width: 100%; height:250px;"
        >

          <el-table-column
              label="时间"
              min-width="60"
              min-height="20"
              prop="time"
          />
          <el-table-column
              align="left"
              label="设备类型"
              min-width="70"
              prop="alarmType"
          />
          <el-table-column
              align="left"
              label="位置"
              min-width="70"
              prop="alarmAddr"
          />

          <el-table-column
              align="left"
              label="原因"
              min-width="70"
              prop="alarmDetail"
          />

        </el-table>

        <el-pagination style="width: 300px;background-color: #fff"
                       :current-page="AlarmListPage"
                       :page-size="AlarmListSize"
                       :total=securenumber
                       layout="prev, pager, next"
                       @current-change="AlarmCurrentChange"
                       @size-change="AlarmSizeChange"
        />
      </div>

      <div style="width: 30%;height: auto;clear:left;display: block;float:left;margin-top: 145px">


          <h3>大型设备</h3>

        <el-table
            :data="KibdNumber"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            style="width: 100%; height:300px;"
        >

          <el-table-column
              label="设备名称"
              min-width="60"
              min-height="20"
              prop="equipment_kind"
          />
          <el-table-column
              align="left"
              label="总台数"
              min-width="70"
              prop="count"
          />


          <el-table-column
              align="left"
              label="维修台数"
              min-width="70"
              prop="slave"
          />

        </el-table>
      </div>

      <div style=" width: 68%; height: auto; display: block;float:right;margin-top: 50px">

        <div  style="width: 30%;float: left;margin-right: 10px;height: auto;margin-top: 50px;">
          <h3>空闲中</h3>
          <el-pagination style="width: 300px"
                         :current-page="RestPage"
                         :page-size="RestSize"
                         :total="resttotal"
                         layout="prev, pager, next"
                         @current-change="RestCurrentChange"
                         @size-change="RestSizeChange"

          />

          <el-table
              :data="restDevice"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              row-key="authorityId"
              style="width: 100%; height:300px;"
          >
            <el-table-column
                label="设备名称"
                min-width="60"
                min-height="20"
                prop="equipment_name"
            />
            <el-table-column
                sort-by="created_at"
                align="left"
                label="设备编号"
                min-width="70"
                prop="equipment_type"
            />
            <el-table-column
                align="left"
                label="创建时间"
                min-width="70"
                prop="location"
            />

          </el-table>
        </div>
        <div  style="width: 30%;float: left;margin-right: 10px;height: auto;margin-top: 50px">

          <h3>使用中</h3>
          <el-pagination style="width: 300px"
                         :current-page="UsePage"
                         :page-size="UseSize"
                         :total="usetotal"
                         layout="prev, pager, next"
                         @current-change="UseCurrentChange"
                         @size-change="UseSizeChange"

          />

          <el-table
              :data="useDevice"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              row-key="authorityId"
              style="width: 100%; height:300px;"
          >
            <el-table-column
                label="角色ID"
                min-width="60"
                min-height="20"
                prop="equipment_name"
            />
            <el-table-column
                sort-by="created_at"
                align="left"
                label="角色名称"
                min-width="70"
                prop="equipment_type"
            />
            <el-table-column
                align="left"
                label="创建时间"
                min-width="70"
                prop="location"
            />

          </el-table>
        </div>
        <div  style="width: 30%;float: left;margin-right: 10px;height: auto;margin-top: 50px">

         <h3>保修</h3>
          <el-pagination style="width: 300px"
                         :current-page="BadPage"
                         :page-size="BadSize"
                         :total="badtotal"
                         layout="prev, pager, next"
                         @current-change="BadCurrentChange"
                         @size-change="BadSizeChange"
          />



          <el-table
              :data="badDevice"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              style="width: 100%; height:300px;"
          >
            <el-table-column
                label="角色ID"
                min-width="60"
                min-height="20"
                prop="equipment_name"
            />
            <el-table-column
                sort-by="created_at"
                align="left"
                label="角色名称"
                min-width="70"
                prop="equipment_type"
            />
            <el-table-column
                align="left"
                label="创建时间"
                min-width="70"
                prop="location"
            />

          </el-table>
        </div>

      </div>

    </div><!--内容盒子尾-->

  </div>


</template>

<script setup>
import {
  getEquipmentList,
  getEquipmentNumber,
  getEquipmentDevice,
  getDataCenter,
  getEquipmentUse,
  getEquipmentBad,
  getEquipmentRest,
} from '@/api/equipment'


import CenterCard from './dataCenterComponents/centerCard.vue'
import part from './dataCenterComponents/part.vue'
import {useRouter} from "vue-router";
import {ref} from "vue";
import {getAuthorityList} from "@/api/authority";
import {useUserStore} from "@/pinia/modules/user";
import CustomPic from "@/components/customPic/index.vue";

//上一页下一页
const handleSizeChange = (val) => {
  OutinSize.value = val
  getDataCenters()
}
//输入页码
const handleCurrentChange = (val) => {
  OutinPage.value = val
  getDataCenters()
}

//分也信息
const userpage = ref(1)
const usertotal = ref(0)
// const userpageSize = ref(3)
const usertableData = ref([])
const usersearchInfo = ref({})

// //员工获取数据
// const getUserTableData = async() => {
//   usersearchInfo.descBool = 2
//   const usertable = await getAuthorityList({ page: userpage.value, pageSize: userpageSize.value,descBool:usersearchInfo.descBool ,...usersearchInfo.value })
//   if (usertable.code === 0) {
//     usertableData.value = usertable.data.list
//     usertotal.value = usertable.data.total
//     userpage.value = usertable.data.page
//     userpageSize.value = usertable.data.pageSize
//   }
// }
//
// getUserTableData()


//分也信息
const equippage = ref(1)
const equiptotal = ref(0)
const equippageSize = ref(3)
const equiptableData = ref([])
const equipsearchInfo = ref({})

// 查询
const getEquipTableData = async() => {
  const table = await getEquipmentList({ page: equippage.value, pageSize: equippageSize.value, ...equipsearchInfo.value })

  if (table.code === 0) {
    equiptableData.value = table.data.list
    equiptotal.value = table.data.total
    equippage.value = table.data.page
    equippageSize.value = table.data.pageSize
  }
  console.log("**************************")
  console.log(equiptableData.value)
}

getEquipTableData()

//在线设备
const KibdNumber =ref([])
//设备总数和设备在线数量
const getEquipmentNumbers = async() => {
  const table = await getEquipmentNumber()
  if (table.code === 0) {
    console.log(table.data)
    KibdNumber.value = table.data
  }
}

getEquipmentNumbers()


const Device =ref([])
const badDevice =ref([])//维修中
const useDevice =ref([])//维修中
const restDevice =ref([])//维修中

const badtotal = ref(0)
const resttotal = ref(0)
const usetotal = ref(0)
const sumNumber1 = ref(0)

const getEquipmentDevices = async() => {
  const table = await getEquipmentDevice()
  if (table.code === 0) {
    console.log(table.data)
    Device.value=table.data
    badDevice.value=Device.value["Bad"]
    useDevice.value=Device.value["Use"]
    restDevice.value=Device.value["Rest"]

  }
}

getEquipmentDevices()

//上一页下一页
const UseSizeChange = (val) => {
  UseSize.value = val
  getEquipmentUses()
}
//输入页码
const UseCurrentChange = (val) => {
  UsePage.value = val
  getEquipmentUses()
}


const UsePage =ref(1)
const UseSize =ref(2)
const getEquipmentUses = async() => {
  const table = await getEquipmentUse({ UsePage: UsePage.value, UseSize: UseSize.value, ...equipsearchInfo.value })
  if (table.code === 0) {
    console.log(table.data)
    useDevice.value=table.data
    usetotal.value=useDevice.value[0]["total"]

    console.log("useDevice.value")
    console.log(usetotal.value)

  }
}

getEquipmentUses()

//上一页下一页
const RestSizeChange = (val) => {
  RestSize.value = val
  getEquipmentRests()
}
//输入页码
const RestCurrentChange = (val) => {
  RestPage.value = val
  getEquipmentRests()
}

const RestPage =ref(1)
const RestSize =ref(5)
const getEquipmentRests = async() => {
  const table = await getEquipmentRest({ RestPage: RestPage.value, RestSize: RestSize.value, ...equipsearchInfo.value })
  if (table.code === 0) {
    console.log(table.data)
    restDevice.value=table.data
    resttotal.value=restDevice.value[0]["total"]
    console.log("resttotal.value")
    console.log(resttotal.value)
  }
}

getEquipmentRests()

//上一页下一页
const BadSizeChange = (val) => {
  BadSize.value = val
  getEquipmentBads()
}
//输入页码
const BadCurrentChange = (val) => {
  BadPage.value = val
  getEquipmentBads()
}
const BadPage =ref(1)
const BadSize =ref(5)
const getEquipmentBads = async() => {
  const table = await getEquipmentBad({ BadPage: BadPage.value, BadSize: BadSize.value, ...equipsearchInfo.value })
  if (table.code === 0) {
    console.log(table.data)
    badDevice.value=table.data
    badtotal.value=badDevice.value[0]["total"]
    console.log("badDevice.value")
    console.log(badDevice.value)
  }
}

getEquipmentBads()



// /api/getDatacenter

const OutinPage = ref(1)
const OutinSize = ref(5)
const StaffStatusPage = ref(1)
const StaffStatusSize = ref(5)
const AlarmListPage = ref(1)
const AlarmListSize = ref(2)

const staffSizeChange = (val) => {
  StaffStatusSize.value = val
  getDataCenters()
}
//输入页码
const staffCurrentChange = (val) => {
  StaffStatusPage.value = val
  getDataCenters()
}
const AlarmSizeChange = (val) => {
  AlarmListSize.value = val
  getDataCenters()
}
//输入页码
const AlarmCurrentChange = (val) => {
  AlarmListPage.value = val
  getDataCenters()
}


const DataInfo =  ref([])
const peoples =  ref([])
const fireinfos = ref([])//火灾雨景
const fireinfos1 = ref([])//预警
const fireinfos2 = ref([])
const visterSum = ref(0)//访客数量
const carSum = ref(0)// 车数
const peopleSum = ref(0)
const peopleSum1 = ref(0)
const examStatusSum = ref([])
const secure = ref([])
const securenumber = ref(0)



const getDataCenters = async() => {
  const table = await getDataCenter( {OutinPage: OutinPage.value, OutinSize: OutinSize.value,StaffStatusPage:StaffStatusPage.value,StaffStatusSize:StaffStatusSize.value,AlarmListPage:AlarmListPage.value,AlarmListSize:AlarmListSize.value, ...equipsearchInfo.value })

  if (table.code === 0) {
    DataInfo.value = table.data
  }
  peoples.value=DataInfo.value["Data"]["outin"]
  fireinfos.value=DataInfo.value["Data"]["alarm"]["IntelligentSecurityAlarm"]
  fireinfos1.value=DataInfo.value["Data"]["alarm"]["WearVisolationDetection"]
  visterSum.value=DataInfo.value["Data"]["visitor"]
  carSum.value=DataInfo.value["Data"]["carNum"]
  peopleSum.value=9
  peopleSum1.value=DataInfo.value["Data"]["total"]
  examStatusSum.value=DataInfo.value["Data"]["staffStatus"]
  secure.value=DataInfo.value["Data"]["alarm"]["alarmStatistics"]["alarmList"]
  securenumber.value=DataInfo.value["Data"]["alarm"]["alarmStatistics"]["all"]

}


getDataCenters()

const loading = ref(true)
const userStore = useUserStore()


//快捷跳转
const toolCards = ref([
  {
    label: '用户数量',
    icon: 'monitor',
    // name: 'user',
    name: 'authority',
    color: '#ff9c6e',
    bg: 'rgba(129, 211, 255)',
    value:peopleSum
  },
  {
    label: '车位剩余',
    icon: 'setting',
    name: 'parkingSpace',
    color: '#69c0ff',
    bg: 'rgba(129, 211, 255)',

    value:carSum
  },

  {
    label: '设备保修',
    icon: 'document-checked',
    name: 'tester',
    color: '#ff85c0',
    bg: 'rgba(129, 211, 255)',
    value:equiptotal
  },
  {
    label: '访客申请',
    icon: 'user',
    name: 'visitor',
    color: '#5cdbd3',
    bg: 'rgba(129, 211, 255)',
    value:visterSum
  }
])

const router = useRouter()

const toTarget = (name) => {
  router.push({ name })
}
//




</script>


<style lang="scss" scoped>

.quick-entrance-items {
  @apply flex items-center justify-center text-center text-gray-800;

  .quick-entrance-item {
    @apply px-8 py-6 flex items-center flex-col transition-all duration-100 ease-in-out rounded-lg cursor-pointer;
    &:hover{
      @apply shadow-lg;
    }
    &-icon {
      @apply flex items-center h-16 w-44 rounded-lg justify-center mx-0 my-auto text-2xl;
    }
    p {
      @apply mt-2.5;
    }
  }
}






</style>














